<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>购物车</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="cache-control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="wed, 26 Feb 1997 08:21:57 GMT">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/shoppingCart.css">
    <style>
        body { background: #f8f8f8;}
    </style>
</head>
<body>
<p class="cart_tab"><span class="inline-block align active">购物车</span><span class="inline-block align">购物记录</span></p>
<article class="shopping_info margin-top-10">
    <p class="shop"><span class="inline-block">店铺：<span>一品人参</span></span><span class="edit inline-block">编辑</span></p>
    <div>
        <p class="inline-block del" style="display: none;"><input type="checkbox" style="display: none;" name="check_del" id="del_0"><label for="del_0"><span class="inline-block del_right">-</span></label></p>
        <p class="inline-block check"><input type="checkbox" style="display: none;" name="check_shop" id="shop_0"><label for="shop_0"><span class="inline-block right">√</span></label></p>
        <p class="inline-block shop_img"><img class="inline-block" src="img/img_0.png"></p>
        <ul class="inline-block">
            <li class="shop_list"><span class="inline-block">店铺：<span>一品人参</span></span><span class="inline-block align_right">￥<span class="cart_money">158.00</span></span></li>
            <li class="align_right num_state"><span>x<span>2</span></span></li>
            <li class="align_right num_active margin-top-5"><span class="inline-block num_minus">-</span><input class="inline-block" type="text" value="2"><span class="inline-block num_plus">+</span></li>
            <li class="weight"><span>40</span>克</li>
        </ul>
    </div>
    <div>
        <p class="inline-block del" style="display: none;"><input type="checkbox" style="display: none;" name="check_del" id="del_1"><label for="del_1"><span class="inline-block del_right">-</span></label></p>
        <p class="inline-block check"><input type="checkbox" style="display: none;" name="check_shop" id="shop_1"><label for="shop_1"><span class="inline-block right">√</span></label></p>
        <p class="inline-block shop_img"><img class="inline-block" src="img/img_0.png"></p>
        <ul class="inline-block">
            <li class="shop_list"><span class="inline-block">店铺：<span>一品人参</span></span><span class="inline-block align_right">￥<span class="cart_money">158.00</span></span></li>
            <li class="align_right num_state"><span>x<span>2</span></span></li>
            <li class="align_right num_active margin-top-5"><span class="inline-block num_minus">-</span><input class="inline-block" type="text" value="2"><span class="inline-block num_plus">+</span></li>
            <li class="weight"><span>40</span>克</li>
        </ul>
    </div>
    <div>
        <p class="inline-block del" style="display: none;"><input type="checkbox" style="display: none;" name="check_del" id="del_2"><label for="del_2"><span class="inline-block del_right">-</span></label></p>
        <p class="inline-block check"><input type="checkbox" style="display: none;" name="check_shop" id="shop_2"><label for="shop_2"><span class="inline-block right">√</span></label></p>
        <p class="inline-block shop_img"><img class="inline-block" src="img/img_0.png"></p>
        <ul class="inline-block">
            <li class="shop_list"><span class="inline-block">店铺：<span>一品人参</span></span><span class="inline-block align_right">￥<span class="cart_money">158.00</span></span></li>
            <li class="align_right num_state"><span>x<span>2</span></span></li>
            <li class="align_right num_active margin-top-5"><span class="inline-block num_minus">-</span><input class="inline-block" type="text" value="2"><span class="inline-block num_plus">+</span></li>
            <li class="weight"><span>40</span>克</li>
        </ul>
    </div>
    <div>
        <p class="inline-block del" style="display: none;"><input type="checkbox" style="display: none;" name="check_del" id="del_3"><label for="del_3"><span class="inline-block del_right">-</span></label></p>
        <p class="inline-block check"><input type="checkbox" style="display: none;" name="check_shop" id="shop_3"><label for="shop_3"><span class="inline-block right">√</span></label></p>
        <p class="inline-block shop_img"><img class="inline-block" src="img/img_0.png"></p>
        <ul class="inline-block">
            <li class="shop_list"><span class="inline-block">店铺：<span>一品人参</span></span><span class="inline-block align_right">￥<span class="cart_money">158.00</span></span></li>
            <li class="align_right num_state"><span>x<span>2</span></span></li>
            <li class="align_right num_active margin-top-5"><span class="inline-block num_minus">-</span><input class="inline-block" type="text" value="2"><span class="inline-block num_plus">+</span></li>
            <li class="weight"><span>40</span>克</li>
        </ul>
    </div>
</article>
<article class="cart_history margin-top-10" style="display: none;">
    <div>
        <p class="inline-block shop_img"><img class="inline-block" src="img/img_0.png"></p>
        <ul class="inline-block">
            <li class="shop_list"><span class="inline-block">店铺：<span>一品人参</span></span><span class="inline-block align_right">￥<span class="cart_money">158.00</span></span></li>
            <li class="align_right"><span>x<span>2</span></span></li>
            <li class="weight"><span>40</span>克</li>
        </ul>
        <h5 class="margin-top-10">总价：<span class="money">￥69</span></h5>
    </div>
</article>
<footer class="shop_num money">
    <input type="checkbox" style="display: none;" name="check_all" id="check_num"><label for="check_num" class="inline-block"><span class="inline-block"><span class="inline-block all">√</span>全选</span></label><span class="inline-block cart_check">合计<span class="check_all">0</span>元</span><span class="inline-block go_buy">结算(<span class="consult">0</span>)</span>
</footer>
<footer class="dele_all">
    <p class="inline-block del_all"><span>-</span><span class="del_info">全选</span></p>
    <p class="inline-block delAll"><span>删除<span class="del_num"></span></span></p>
</footer>
</body>
<script src="js/zepto.min.js"></script>
<script>
    $("input[name='check_shop']").click(function(){
        var all_length=$("input[name='check_shop']").length;
        var check_length=$("input[name='check_shop']:checked").length;
        var check_money=$("input[name='check_shop']:checked");
        var check_all=check_money.parents('p').siblings('ul').children().children(".align_right").children(".cart_money");
        var money=0;
        for(var i=0;i<check_money.length;i++){
            money+=parseFloat((check_all[i].innerHTML));
        }
        $(".check_all")[0].innerHTML=money;
        $(".consult").html(check_length);
        if($(this)[0].checked==true){
            if(all_length==check_length){
                $(".all").attr("style","background:#35e14d");
                $("input[name='check_all']").prop("checked",true);
            }
            $(this).siblings('label').children("span").attr("style","background:#35e14d");
        }else if($(this)[0].checked==false){
            $(this).siblings('label').children("span").attr("style","background: #837e7e;");
            $(".all").attr("style","background:#837e7e");
            $("input[name='check_all']").prop("checked",false);
        }
    });
    $("input[name='check_all']").click(function(){
        if($(this)[0].checked==true){
            $("input[name='check_shop']").prop("checked",true);
            $(".right").attr("style","background:#35e14d");
            $(".all").attr("style","background:#35e14d");
            var check_money=$("input[name='check_shop']:checked");
            var check_all=check_money.parents('p').siblings('ul').children().children(".align_right").children(".cart_money");
            var money=0;
            for(var i=0;i<check_money.length;i++){
                money+=parseFloat((check_all[i].innerHTML));
            }
            $(".check_all")[0].innerHTML=money;
            $(".consult").html(check_money.length);
        }else if($(this)[0].checked==false){
            $("input[name='check_shop']").prop("checked",false);
            $(".right").attr("style","background:#837e7e");
            $(".all").attr("style","background:#837e7e");
            $(".check_all")[0].innerHTML=0;
            $(".consult").html(0);
        }
    });
    //编辑
    $(".edit").tap(function(){
        if($(".edit").html()=="编辑"){
            $("input[name='check_del']").prop("checked",false);
            $(".del_right").css("background","#837e7e");
            $(".check").css("display","none");
            $(".money").css("display","none");
            $(".dele_all").css("display","block");
            $(".del").css("display","inline-block");
            $(".edit").html("完成");
        }else if($(".edit").html()=="完成"){
            $(".all").css("background","#837e7e");
            $(".check_all").html("0");
            $(".consult").html("0");
            $(".del_num").html("");
            $("input[name='check_shop']").prop("checked",false);
            $(".right").attr("style","background:#837e7e");
            $(".money").css("display","block");
            $(".dele_all").css("display","none");
            $(".check").css("display","inline-block");
            $(".del").css("display","none");
            $(".edit").html("编辑");
        }
    });
    //删除操作
    $("input[name='check_del']").click(function(){
        var all_length=$("input[name='check_del']").length;
        var check_length=$("input[name='check_del']:checked").length;
        $(".del_all").children(":nth-child(1)").attr("style","border:1px solid #f47031;");
        $(".del_all").attr("style","color: #f47031;");
        if(all_length==check_length){
            $(".del_all span:last-child").html("取消全选");
        }else{
            $(".del_all").children(":nth-child(2)").html("全选");
        }
        if(check_length==0){
            $(".del_all").children(":nth-child(1)").attr("style","border:1px solid #919191;");
            $(".del_all").attr("style","color: #919191;");
        }
        $(".del_num").html("("+check_length+")");
        $(".delAll").css("color","#f56520");
        if(check_length==0){
            $(".del_num").html("");
            $(".delAll").css("color","#3d3d3d");
        }
        if($(this)[0].checked==true){
            $(this).siblings('label').parents("p").siblings("ul").children(".num_active").css("display","none");
            $(this).siblings('label').parents("p").siblings("ul").children(".num_state").css("display","block");

            $(this).siblings('label').children("span").attr("style","background:#35e14d");
        }else if($(this)[0].checked==false){
            $(this).siblings('label').parents("p").siblings("ul").children(".num_state").css("display","none");
            $(this).siblings('label').parents("p").siblings("ul").children(".num_active").css("display","block");
            $(this).siblings('label').children("span").attr("style","background: #837e7e;");

        }
    });
    //删除全选操作
    $(".del_all").tap(function(){
        if($(".del_info").html()=="全选"){
            $(".num_active").css("display","none");
            $(".num_state").css("display","block");
            $(this).children(":nth-child(1)").attr("style","border:1px solid #f25c13;");
            $(this).attr("style","color:#f25c13;");
            $("input[name='check_del']").prop("checked",true);
            $(".del_info").html("取消全选");
            $(".del_right").css("background","#34e24d");
        }else if($(".del_info").html()=="取消全选"){
            $(".num_active").css("display","block");
            $(".num_state").css("display","none");
            $(this).children(":nth-child(1)").attr("style","border:1px solid #7c7c7c;");
            $(this).attr("style"," color:#7c7c7c;");
            $("input[name='check_del']").prop("checked",false);
            $(".del_info").html("全选")
            $(".del_right").css("background","#837e7e");
        }
    });
    //删除
    $(".delAll").tap(function(){
        var check_money=$("input[name='check_del']:checked");
        $(check_money).each(function (index) {
            $("input[name='check_del']:checked").parents("div").css("display","none");
        })
    });
    //tab切换
    $(".cart_tab span").tap(function(){
        $(this).each(function(){
            $(this).siblings().removeClass("active");
            $(this).addClass("active");
            if($(this).html()=="购物车"){
                $(".shop_num").css("display","block");
                $(".shopping_info").css("display","block");
                $(".cart_history").css("display","none");
            }else{
                $(".shop_num").css("display","none");
                $(".cart_history").css("display","block");
                $(".shopping_info").css("display","none");
            }
        })
    });
    /*加减*/

    $(".num_minus").tap(function(){
        var single=79;
        var value=$(this).siblings()[0].value;
        if(value<=0){
            $(this).siblings("input")[0].value=0;
            return false;
        }
        $(this).siblings("input")[0].value--;
        var total_money=0;
        total_money=single*($(this).siblings("input")[0].value);
        $(this).parents("li").siblings(".shop_list").children().children(".cart_money").html(total_money);
    });
    $(".num_plus").tap(function(){
        var single=79;
        var value=$(this).siblings()[0].value;
        $(this).siblings("input")[0].value++;
        var total_money=0;
        total_money=single*($(this).siblings("input")[0].value);
        $(this).parents("li").siblings(".shop_list").children().children(".cart_money").html(total_money);
    });
</script>
</html>